<template>
    <div class="cgzs">
        <div class="cgzs-top">
            <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                <el-form-item label="任务名称">
                    <el-input v-model="form.taskName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="区域类型">
                    <el-select v-model="form.areaType" placeholder="请选择">
                        <el-option v-for="item in qylx" :key="item.statusid" :label="item.statusname"
                            :value="item.statusid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单元名称">
                    <el-cascader v-model="form.areaName" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                        @change="xzqhorgChange" :clearable="true"></el-cascader>
                </el-form-item>
                <span class="toptqy">
                    <el-form-item label="提取源">
                        <el-select v-model="form.extractSource" placeholder="请选择">
                            <el-option v-for="item in tqy" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </span>
                <el-form-item label="提取周期">
                    <el-select v-model="form.extractType" placeholder="请选择">
                        <el-option v-for="item in tqsd" :key="item.statusid" :label="item.statusname"
                            :value="item.statusid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="循环周期">
                    <el-select v-model="form.cycleType" placeholder="请选择">
                        <el-option v-for="item in xhzq" :key="item.statusid" :label="item.statusname"
                            :value="item.statusid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="top-button">
                <el-button size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
                <el-button size="default" @click="daochu"><i class="el-icon-upload2"></i> 导出 </el-button>
                <el-button size="default" @click="plshanchu"><i class="el-icon-delete"></i> 删 除</el-button>
            </div>
        </div>
        <div class="cgzs-middle">
            <el-table class="tableBox" :data="tableData" border stripe height="90%" @selection-change="handleSelectChange"
                :row-class-name="tableRowClassName" :header-cell-style="{ background: '#b2dffe', color: '#000' }"
                style="width: 100%">
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column type="index" align="center" label="序号" width="50" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-text="pagesize * (currentPage - 1) + 1 + scope.$index"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{ scope.row.areaName }}{{ scope.row.taskName }}
                    </template>
                </el-table-column>
                <el-table-column prop="stationCount" label="测站数量" width="80" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <a href="#" @click="czsldhkxs(scope.row)">{{ scope.row.stationCount }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="areaType" label="区域类型" width="140" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.areaType == 1">行政区</span>
                        <span v-if="scope.row.areaType == 2">平原区</span>
                        <span v-if="scope.row.areaType == 3">超采区</span>
                        <span v-if="scope.row.areaType == 4">管控区</span>
                        <span v-if="scope.row.areaType == 5">山丘区</span>
                    </template>
                </el-table-column>
                <el-table-column prop="areaName" label="单元名称" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="extractSource" label="提取源" width="140" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractSource == 1">实时数据</span>
                        <span v-if="scope.row.extractSource == 2">整编日均值数据</span>
                        <span v-if="scope.row.extractSource == 3">基础数据</span>
                        <span v-if="scope.row.extractSource == 6">整编年均值</span>
                    </template>
                </el-table-column>
                <el-table-column prop="extractTable" label="提取信息" width="140" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractTable == 1">水位表</span>
                        <span v-if="scope.row.extractTable == 2">水温表</span>
                        <span v-if="scope.row.extractTable == 3">泉流量表</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cycleType" label="循环周期" width="140" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cycleType == 1">单次循环</span>
                        <span v-if="scope.row.cycleType == 2">周期循环</span>
                    </template>
                </el-table-column>
                <el-table-column prop="extractType" label="提取周期" width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractType == 1">日</span>
                        <span v-if="scope.row.extractType == 2">月</span>
                        <span v-if="scope.row.extractType == 3">季</span>
                        <span v-if="scope.row.extractType == 4">年</span>
                        <span v-if="scope.row.extractType == 5">其他</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ts" label="最新生成时间" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column align="center" width="100" label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <i class="el-icon-download" title="下 载" @click="xiazai(scope.row)"></i>&nbsp;
                        <i class="el-icon-delete" title="删 除" @click="bgshanchu(scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 测站数量对话框 -->
        <el-dialog :visible.sync="dialogVisible" width="80%" :append-to-body="true" class="czsldhk">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.czsldhktitle4 }}{{ this.czsldhktitle3 }}监测站信息</span>
                </div>
            </div>
            <div class="center" width="100%" style="height:100%">
                <el-form :model="zxqkform" label-width="85px" :inline="true" size="normal" style="height:12%">
                    <el-form-item label="测站编码">
                        <el-input v-model="zxqkform.stcd" style="width:90px" placeholder="请输入测站编码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="czslcx"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                        <el-button type="primary" @click="czslcz"><i class="el-icon-refresh"></i> 重 置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 水利或自然资源 水位表 实时或整编数据 -->
                <div v-if="this.extractTable == 1 && this.extractSource != 3" style=" width: 100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" label="监测站名称" width="100" idth="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="单元名称" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类型" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="bd" label="埋深(m)" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="z" label="水位(m)" width="80" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="tm" label="时间" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 水利或自然资源 水温表 实时或整编数据-->
                <div v-if="this.extractTable == 2 && this.extractSource != 3" style=" width:100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" label="监测站名称" width="100" idth="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="单元名称" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wt" label="水温(℃)" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="at" label="气温(℃)" width="80" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="tm" label="时间" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 泉流量表 (实时数据)-->
                <div v-if="this.extractTable == 3 && this.extractSource == 1" style="width: 100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" label="监测站名称" idth="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="单元名称" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="q" :show-overflow-tooltip="true">
                            <template slot="header">
                                <span>泉流量(m<sup>3</sup>/s)</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="z" label="水位(m)" width="80" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="tm" label="时间" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 泉流量表 (整编日数据)-->
                <div v-if="this.extractTable == 3 && this.extractSource == 2" style="width: 100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" label="监测站名称" width="100" idth="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="单元名称" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="w" :show-overflow-tooltip="true">
                            <template slot="header">
                                <span>泉涌水量(m<sup>3</sup>)</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="yr" label="年份" width="80" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="mth" label="月份" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 泉流量表 (基础数据数据)-->
                <div v-if="this.extractTable == 3 && this.extractSource == 3" style="width: 100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" label="序号" fixed width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" fixed label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" fixed label="监测站名称" width="100" idth="100"
                            :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sptp" label="泉类型" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sptp == 0">上升泉</span>
                                <span v-if="scope.row.sptp == 1">下降泉</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="esstdt" label="设站日期" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="wdstdt" label="撤站日期" width="80" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="prrg" label="产权单位" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="admnst" label="管理单位" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="nt" label="备注" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 自然资源 (基础信息数据)-->
                <div v-if="this.stationGenre == 3 && this.extractSource == 3 && this.extractTable != 1 && this.extractTable != 2 && this.extractTable != 3"
                    style="width: 100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" fixed label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" fixed label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" fixed label="监测站名称" width="100" idth="100"
                            :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="owdp" label="原井深" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="wpel" label="固定点高程" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="grel" label="地面高程" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" width="100" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bccd" label="地下水按埋藏条件分类编码" width="190" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.bccd == 2100">潜水</span>
                                <span v-if="scope.row.bccd == 2101">承压水</span>
                                <span v-if="scope.row.bccd == 2102">包气带水</span>
                                <span v-if="scope.row.bccd == 2103">上层滞水</span>
                                <span v-if="scope.row.bccd == 2104">第I承压水</span>
                                <span v-if="scope.row.bccd == 2105">第II承压水</span>
                                <span v-if="scope.row.bccd == 2106">第III承压水</span>
                                <span v-if="scope.row.bccd == 2107">第IV承压水</span>
                                <span v-if="scope.row.bccd == 2108">第V承压水</span>
                                <span v-if="scope.row.bccd == 2109">不确定</span>
                                <span v-if="scope.row.bccd == 2110">松散岩类</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="qm" label="地下水含水介质分类" width="150" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.qm == 1100">孔隙水</span>
                                <span v-if="scope.row.qm == 1101">裂隙水</span>
                                <span v-if="scope.row.qm == 1102">岩溶水"</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="addvnm" label="省" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="cityAddvnm" label="市" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="countyAddvnm" label="区" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 水利站 (基础信息数据)-->
                <div v-if="this.extractSource == 3 && this.stationGenre == 2 && this.extractTable != 3"
                    style="width: 100%;height: 100%;">
                    <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                        <el-table-column type="index" fixed label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stcd" fixed label="监测站编码" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stnm" fixed label="监测站名称" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" width="100" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lgtd" label="东经(℃)" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="lttd" label="北纬(℃)" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="owdp" label="原井深" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="absdmnm" label="绝对基面名称" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stdmel" label="冻结基面名称" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="admsdmgp" label="绝对基面与冻结基面高差" width="180" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="fpel" label="固定点高程" width="110" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="grel" label="地面高程" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="wbrh" label="井台高" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wltp" label="监测井类型" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.wltp == 0">专用井</span>
                                <span v-if="scope.row.wltp == 1">生产井</span>
                                <span v-if="scope.row.wltp == 2">民用井</span>
                                <span v-if="scope.row.wltp == 3">勘探井</span>
                                <span v-if="scope.row.wltp == 4">其他</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="protector" label="保护装置" width="80" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.protector == 0">井口保护设施</span>
                                <span v-if="scope.row.protector == 1">站房</span>
                                <!-- <span v-if="scope.row.protector == 2">民用井</span>
                                <span v-if="scope.row.protector == 3">勘探井</span>
                                <span v-if="scope.row.protector == 4">其他</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column prop="bldwltp" label="建井类型" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.bldwltp == 0">新建</span>
                                <span v-if="scope.row.bldwltp == 1">改建</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="artesianwl" label="是否自留井" width="110" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.artesianwl == 0">非自流</span>
                                <span v-if="scope.row.artesianwl == 1">自流</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bccd" label="埋藏条件" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.bccd == 10">潜水</span>
                                <span v-if="scope.row.bccd == 20">承压水</span>
                                <span v-if="scope.row.bccd == 21">第I含水岩组承压水</span>
                                <span v-if="scope.row.bccd == 22">第Ⅱ含水岩组承压水</span>
                                <span v-if="scope.row.bccd == 23">第Ⅲ含水岩组承压水</span>
                                <span v-if="scope.row.bccd == 24">第IV含水岩组承压水</span>
                                <span v-if="scope.row.bccd == 25">第V含水岩组承压水</span>
                                <span v-if="scope.row.bccd == 26">第V含水岩组以下承压水</span>
                                <span v-if="scope.row.bccd == 30">混水</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="qm" label="含水介质" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.qm == 0">孔隙水</span>
                                <span v-if="scope.row.qm == 1">裂隙水</span>
                                <span v-if="scope.row.qm == 2">岩溶水</span>
                                <span v-if="scope.row.qm == 3">孔隙裂隙水</span>
                                <span v-if="scope.row.qm == 4">孔隙岩溶水</span>
                                <span v-if="scope.row.qm == 5">裂隙岩溶水</span>
                                <span v-if="scope.row.qm == 6">其他</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pbit" label="刊布项目" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.pbit == 0">水位水温</span>
                                <span v-if="scope.row.pbit == 1">水位水温水质</span>
                                <span v-if="scope.row.pbit == 2">水位</span>
                                <span v-if="scope.row.pbit == 3">水质</span>
                                <span v-if="scope.row.pbit == 4">开采量</span>
                                <span v-if="scope.row.pbit == 5">其他</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="esstdt" label="设站日期" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="wdstdt" label="撤站日期" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="prrg" label="产权单位" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="asmnst" label="管理单位" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="ostcd" label="原编码" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="nt" label="备注" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-pagination @size-change="dhkymSizeChange" @current-change="dhkymCurrentChange"
                    :current-page.sync="currentPage1" :page-size="pagesize1" layout="total, prev, pager, next"
                    :total="total1" style="height:5%">
                </el-pagination>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { qylx, xzqhlist, sjtqcgzslb, sjtqcgzsplsc, sjtqcgzsdc, sjtqrwlbczsldhk, sjtqcgzsiconsc, sjtqcgzslbxiaz, sjtqcgzscesllb } from '@/api/index'
import exprotFile from "@/utils/exportFile"
import common from '@/common'
export default {
    data() {
        return {
            // 主页头部表单
            form: {
                taskName: '',//任务名称输入框
                areaType: '',//区域类型下拉框
                areaName: '220000',//单元名称级联选择器
                extractSource: '',//提取源
                extractType: '',//提取周期
                cycleType: '',//循环周期下拉框
            },
            qylx: [], // 区域类型下拉框数组
            xzqhdata: [], // 单元名称下拉框数组//行政区划
            xzqhprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            tqy: [], // 提取源下拉框数组        
            tqsd: [], // 提取周期下拉框数组          
            xhzq: [],// 循环周期下拉框数组           
            addlb: [],// 测站类别下拉框内容      
            tableData: [],// 主页表格内容
            // 查看对话框
            dialogVisible: false,//测站数量对话框
            tableData1: [],// 测站数量对话框基本信息数组
            cktableData1: [],//查看对话框任务信息
            cktableData2: [],//查看对话框数据信息
            zxqkform: {
                stcd: '',//测站编码
                stnm: '',//测站名称
                areaName: '',//单元名称
                sttp: '',//测站类别
            },
            // 底部页码
            pagesize: 10,
            currentPage: 1,
            total: 10,
            // 底部页码
            pagesize1: 10,
            currentPage1: 1,
            total1: 10,
            czsldhkTitle3: '',//测站数量对话框title
            czsldhkTitle4: '',
            multipleSelection: [],//获取的多组测站的数据
            areaCode: '',
            endTime: '',
            startTime: '',
            extractSource: '',
            extractTable: '',
            id: '',
            stationGenre: '',
            stcd: ''
        }
    },
    mounted() {
        this.xzqhlist();//获取行政区划
        this.qylxobj();//获取区域类型
        this.sjtqcgzslb();//获取数据列表
    },
    methods: {
        // 获取行政区划
        async xzqhlist() {
            // const addvcd = '220000'
            const res = await xzqhlist(this.form.areaName)
            // console.log(res.data.data);
            this.xzqhdata = res.data.data
        },
        // 获取区域类型
        async qylxobj() {
            const govern_type = "area_type"
            const res = await qylx(govern_type)
            // console.log(res);//200
            this.qylx = res.data.data
            // 获取提取源数据
            const res1 = "extract_source"
            const tqy = await qylx(res1)
            // console.log(tqy);
            this.tqy = tqy.data.data
            // extract_type
            // 获取提取周期数据
            const tqsd = 'extract_type'
            const res2 = await qylx(tqsd)
            // console.log(res2);
            this.tqsd = res2.data.data
            // cycle_type
            // 获取循环周期数据
            const xhzq = 'cycle_type'
            const res3 = await qylx(xhzq)
            // console.log(res3);
            this.xhzq = res3.data.data
            const zt1 = 'sttp'
            const res6 = await qylx(zt1)
            // console.log(res4);
            this.addlb = res6.data.data
        },
        // 获取数据列表
        async sjtqcgzslb() {
            const cgzslbobj = {
                areaName: this.form.areaName,
                areaType: this.form.areaType,
                cycleType: this.form.cycleType,
                extractSource: this.form.extractSource,
                extractType: this.form.extractType,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                taskName: this.form.taskName
            }
            const res = await sjtqcgzslb(JSON.stringify(cgzslbobj))
            // console.log(res);
            this.tableData = res.data.data.list
            this.total = res.data.data.total
            console.log(this.tableData);
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pagesize1 = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
            // console.log(`当前页: ${val}`);
            this.sjtqcgzslb();
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 下拉框自动关闭,选择后触发事件
        xzqhorgChange(val) {
            this.form.areaName = val.slice(-1).toString();
            this.$refs.xzqh.dropDownVisible = false;
        },
        // 查询
        chaxun() {
            const cgzslbobj = {
                areaName: this.form.areaName,
                areaType: this.form.areaType,
                cycleType: this.cycleType,
                extractSource: this.form.extractSource,
                extractType: this.form.extractType,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                taskName: this.form.taskName
            }
            sjtqcgzslb(JSON.stringify(cgzslbobj)).then(res => {
                // console.log(res);
                this.tableData = res.data.data.list
                // this.total = this.tableData.length
                this.total = res.data.data.total
            })
        },
        // 重置
        chongzhi() {
            this.form.areaName = '220000'
            this.form.areaType = ''
            this.form.cycleType = ''
            this.form.extractSource = ''
            this.form.extractType = ''
            this.form.taskName = ''
            this.currentPage = 1
            this.pagesize = 10
            this.sjtqcgzslb();
        },
        // 获取多组测站数据
        handleSelectChange(val) {
            // console.log(val);
            this.multipleSelection = val
            // console.log(this.multipleSelection);
        },
        // 导出
        daochu() {
            // if (this.multipleSelection.length == 0) {
            //     this.$message({
            //         type: 'error',
            //         duration: 3000,
            //         message: '导出失败，请选择要导出的测站'
            //     })
            //     return
            // } else { 
            // }
            let arr = []
            for (let i = 0; i < this.multipleSelection.length; i++) {
                arr.push(this.multipleSelection[i].id)
            }
            // 将数组内的值从小到大排序，
            arr.sort()
            let arr1 = arr.sort()
            const daocobj = {
                addvcd: this.form.areaName,
                areaType: this.form.areaType,
                cycleType: this.form.cycleType,
                extractSource: this.form.extractSource,
                extractType: this.form.extractType,
                idArray: arr1,
                taskName: this.form.taskName
            }
            // console.log(arr1);
            sjtqcgzsdc(JSON.stringify(daocobj)).then(res => {
                // console.log(res);
                //利用封装的下载文件js
                exprotFile.getExcel(res.data, "成果展示数据统计");
            })
        },
        // 批量删除
        plshanchu() {
            let arr = []
            for (let i = 0; i < this.multipleSelection.length; i++) {
                arr.push(this.multipleSelection[i].id)
            }
            // 将数组内的值从小到大排序，
            arr.sort()
            let arr1 = arr.sort()
            // console.log(arr1);
            sjtqcgzsplsc(arr1).then(res => {
                // console.log(res);
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        duration: 3000,
                        message: '删除成功'
                    })
                    this.sjtqcgzslb();
                } else {
                    this.$message({
                        type: 'error',
                        duration: 3000,
                        message: '删除失败'
                    })
                }
            })
            // console.log('批量删除');
        },
        // 下载
        xiazai(row) {
            console.log(row);
            const sjtqcgzsminobj = {
                etm: row.endTime,
                extractSource: row.extractSource,
                extractTable: row.extractTable,
                id: row.id,
                stm: row.startTime,
                stationGenre: row.stationGenre,
            }
            // console.log(row.extractSource);
            if (row.extractSource == 3) {
                sjtqcgzslbxiaz(JSON.stringify(sjtqcgzsminobj)).then(res => {
                    //利用封装的下载文件js
                    exprotFile.getExcel(res.data, "测站成果展示数据统计")
                })
            } else if (row.extractSource != 3) {
                sjtqcgzslbxiaz(JSON.stringify(sjtqcgzsminobj)).then(res => {
                    //利用封装的下载文件js
                    exprotFile.getCsv(res.data, "测站成果展示数据统计")
                })
            }
        },
        // 测站数量对话框
        czsldhkxs(row) {
            // console.log(row);
            this.dialogVisible = true
            this.czsldhktitle3 = row.taskName
            this.czsldhktitle4 = row.areaName
            // console.log(this.czsldhktitle3, this.czsldhktitle4);
            this.czsldialogVisible = true
            const rwlbsldhkobj = {
                etm: row.endTime,
                extractSource: row.extractSource,
                extractTable: row.extractTable,
                id: row.id,
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stm: row.startTime,
                stationGenre: row.stationGenre,
                stcd: this.zxqkform.stcd
            }
            sjtqcgzscesllb(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
            this.endTime = row.endTime
            this.startTime = row.startTime
            this.extractSource = row.extractSource
            this.extractTable = row.extractTable
            this.id = row.id
            this.stationGenre = row.stationGenre
            this.stcd = row.stcd
            // console.log(this.stationGenre, this.extractTable);
        },
        // 测站数量对话框查询
        czslcx() {
            const rwlbsldhkobj = {
                etm: this.endTime,
                extractSource: this.extractSource,
                extractTable: this.extractTable,
                id: this.id,
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stm: this.startTime,
                stationGenre: this.stationGenre,
                stcd: this.zxqkform.stcd
            }
            // console.log(rwlbsldhkobj);
            sjtqcgzscesllb(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
        },
        // 测站数量重置
        czslcz() {
            this.zxqkform.stcd = ''
            this.pagesize1 = 10
            this.currentPage1 = 1
            const rwlbsldhkobj = {
                etm: this.endTime,
                extractSource: this.extractSource,
                extractTable: this.extractTable,
                id: this.id,
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stm: this.startTime,
                stationGenre: this.stationGenre,
                stcd: this.zxqkform.stcd
            }
            console.log(rwlbsldhkobj);
            sjtqcgzscesllb(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
        },
        dhkymSizeChange(val) {

        },
        // 测站数量对话框页码切换
        dhkymCurrentChange(val) {
            this.currentPage1 = val
            // this.czsldhkxs(row);
            const rwlbsldhkobj = {
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stationGenre: row.stationGenre,
                stcd: '',
                taskId: row.taskId
            }
            // console.log(rwlbsldhkobj);
            sjtqrwlbczsldhk(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
        },
        // 表格里面的删除
        bgshanchu(row) {
            // console.log(row);
            sjtqcgzsiconsc(row.id).then(res => {
                // console.log(res);
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        duration: 3000,
                        message: '删除成功'
                    })
                    this.sjtqcgzslb();
                } else {
                    this.$message({
                        type: 'error',
                        duration: 3000,
                        message: '删除失败'
                    })
                }
            })
            // sjtqcgzsplsc(row.id).then(res => {
            //     console.log(res);
            // })
        }
    }
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

.cgzs {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .cgzs-top {
        width: 97%;
        height: 10%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-form {
            /* width: 73%; */
            height: 100%;
            /* border: 1px solid red; */
            box-sizing: border-box;
            float: left;

            .el-form-item {
                padding-top: .625rem;
                padding-right: .5rem;
                margin-right: 0;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 92px;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }
            }
        }

        .top-button {
            /* width: 27%; */
            height: 100%;
            padding-top: 10px;
            /* border: 1px solid red; */
            box-sizing: border-box;
            float: right;

            .el-button {
                background-color: #0055ab;
                color: #fff;

                .iconfont {
                    font-size: 14px;
                }
            }
        }
    }

    ::v-deep .cgzs-middle {
        width: 97%;
        height: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-table {
            width: 100%;
            height: 90%;
            background-color: rgb(243, 243, 243);
            padding-top: 10px;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {
                .el-icon-download:before {
                    font-size: 1rem;
                    cursor: pointer;
                }

                .el-icon-delete:before {
                    cursor: pointer;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }

    ::v-deep .ssdhk {
        .el-dialog {
            height: 90%;
            box-sizing: border-box;

            .el-dialog__header {
                width: 100%;
                height: 12%;
                box-sizing: border-box;

                .dialog-title {
                    text-align: center;
                    font-weight: bold;
                    font-size: 40px;
                    color: rgb(51, 51, 51);

                    .button-right {
                        span {
                            color: #0055ab;
                        }
                    }
                }
            }

            .el-dialog__body {
                width: 100%;
                height: 73%;
                box-sizing: border-box;

                .center {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;

                    .el-table {
                        /* width: 100%;
                        height: 100%; */
                        box-sizing: border-box;
                    }
                }
            }

            .el-dialog__footer {
                width: 100%;
                height: 15%;
                box-sizing: border-box;
            }
        }
    }
}

/* 控制top表单的宽度 */
/deep/.cgzs-top .el-input {
    width: 5.75rem !important;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 8px; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}

/* 表格的行高 */
/deep/ .tableBox {
    th {
        padding: 0 !important;
        height: 50px;
        line-height: 50px;
    }

    td {
        padding: 0 !important;
        height: 40px;
        line-height: 40px;
    }
}


// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 查看对话框标题的大小和颜色 */
/deep/ .dialog-title {
    .button-right {
        span {
            font-size: 20px;
            color: #0055ab;
        }
    }
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/* @media all and (max-width:720px) and (min-width:320px) {

    body {

        background-color: red;

    }

    @media all and (max-width:320px) {

        body {

            background-color: blue;

        }

    }
} */
/* 去掉滚动条上方的小方块背景色 */
/deep/ .el-table--border th.el-table__cell.gutter:last-of-type {
    background: rgb(243, 243, 243);
    border: none;
}

/* 对话框样式 */
/deep/ .el-dialog {
    width: 80%;
    height: 76%;
    box-sizing: border-box;

    .el-dialog__header {
        height: 12%;
        padding-bottom: 1.25rem;
        background-color: #eee;
        box-sizing: border-box;
    }

    /* 查看对话框标题的大小和颜色 */
    .dialog-title {
        .button-right {
            span {
                font-size: 1.25rem;
                color: #0055ab;
            }
        }
    }

    .el-dialog__body {
        width: 100%;
        height: 73%;
        padding: 0 20px;
        box-sizing: border-box;
        margin-top: 10px;

        .center {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin-top: 10px;

            .el-form {
                width: 100%;
                height: 12%;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 136px !important;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }

                .el-input {
                    width: 136px !important;

                    .el-input__inner {
                        width: 100%;
                    }
                }

                .el-button {
                    background-color: #0055ab;
                }
            }

            .el-table {
                width: 100%;
                height: 88%;
                box-sizing: border-box;
                margin-top: 10px;
            }
        }

        .center {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            margin-top: 10px;

            .el-table__body-wrapper {
                z-index: 2
            }
        }
    }

    /* 查看对话框底部下载按钮 */
    .el-dialog__footer {
        width: 100%;
        height: 15%;
        text-align: center;

        .el-pagination {
            position: absolute;
            bottom: 3%;
            right: 6%;
        }

        .el-button {
            background-color: #0055ab;
            color: #fff;
        }
    }
}

/* /deep/ .topzhuangt {
    .el-form-item {
        .el-form-item__label {
            width: 3.375rem !important;
        }
    }
} */
/deep/ .toptqy {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 4.375rem !important;
            /* text-align: center !important; */
        }
    }
}
</style>